<template>
	<!-- 限时抢购 -->
	<view class="teamAndKilling">
		<scroll-view ref="tabbar1" id="tab-bar" class="tab-bar" :scroll="false" :scroll-x="true" :show-scrollbar="false"
			:scroll-into-view="`id` + current" v-if="source == 1 || end == true">
			<view class="tab-list">
				<view :id="`id` + index" class="tab-item-wrapper" v-for="(item, index) in list" :key="index">
					<view class="tab-item" :class="{ 'item-active': current === index }" @click="tabsChange(index, item.id)">
						<view class="">
							{{ item.name }}
						</view>
						<view class="">
							{{ item.seckill_start_time_show }}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="timeEnd" v-if="source == 1">
			<view class="">
				<view class="timeContent" v-if="!end && start">
					距本场结束<u-count-down class="time" bg-color="#DA251C" :timestamp="timestamp" font-size="18"
						separator-color="#161415" color="#fff"></u-count-down>
				</view>
				<view class="timeContent" v-if="!start">
					距本场开始<u-count-down class="time" bg-color="#DA251C" :timestamp="timestampstart" font-size="18"
						separator-color="#161415" color="#fff"></u-count-down>
				</view>
				<view class="prompt">
					抢购结果以支付时间为准，抢完即止，结束后恢复原售价
				</view>
			</view>
		</view>
		<view class="shopList" v-for="(item, index) in shopList.list" :key="index">
			<view class="shop_top">
				<view class="topLeft">
					<image :src="$image + item.goods_image" mode=""></image>
					<view class="shopText">
						<view class="shopName">{{ item.goods_name }}
							<text class="shopManjian" v-if="source == 2">{{ item.pintuan_num }}人团</text>
						</view>
						<view class="shopNum">{{ item.goods_name }}</view>
						<view class="shopMoney" v-if="source == 2">已拼{{ item.order_num }}</view>
						<view class="price">
							<text class="pri_o">￥</text><text class="pri_s">{{ source == 2 ? item.pintuan_price :
								item.seckill_price }}</text>
							<text class="pri_t">￥{{ item.price }}</text>
						</view>
					</view>

				</view>
				<view class="topRight">
					<view class="school" @click="goDetail(item)">
						{{ pinqiang }}
					</view>
				</view>
			</view>
			<view class="shop_bottom"></view>
		</view>
	</view>
</template>

<script>
import navbar from '../../components/navBar/navBar.vue'
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			timestamp: 0,
			source: 1,
			pinqiang: '',
			list: [],
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			shopList: [],
			end: false,
			start: false,
			$image: this.$image,
			timestampstart: 0,
		}
	},
	components: {
		navbar
	},
	onLoad(options) {
		this.source = options.source;
		if (options.source == 1) {
			this.pinqiang = '马上抢'
			uni.setNavigationBarTitle({
				title: '限时抢购'
			})
			this.flashKillTimePeriod() // 时间段
		} else if (options.source == 2) {
			this.pinqiang = '马上拼'
			uni.setNavigationBarTitle({
				title: '今日拼团'
			})
			this.GroupProductList()
		}

	},
	methods: {
		// 秒杀商品列表
		flashKillTimePeriod() {
			let date = new Date()
			let nowYear = date.getFullYear()
			let nowMonth = this.checked(date.getMonth() + 1)
			let nowDate = this.checked(date.getDate())
			let nowHours = this.checked(date.getHours())
			let nowMinutes = this.checked(date.getMinutes())
			let nowSeconds = this.checked(date.getSeconds())
			let currentTimestamp = date.getTime() / 1000
			let now = new Date();
			// 将时间部分设为 00:00:00
			now.setHours(0);
			now.setMinutes(0);
			now.setSeconds(0);
			now.setMilliseconds(0);
			// 获取当天开始时间的时间戳
			let startTimeStamp = now.getTime() / 1000;
			$api.postFlashKillTimePeriod({}).then(res => {
				this.list = res.data.data.list
				this.timestamps = res.data.data.list
				let detes = nowHours + ':' + nowMinutes + ':' + nowSeconds
				this.timestamps.filter(item => {
					if (item.id == this.list[this.current].id) {
						this.timestamp = startTimeStamp + item.seckill_end_time - currentTimestamp
						this.timestampstart = startTimeStamp + item.seckill_start_time - currentTimestamp
						console.log(item.seckill_end_time_show, "===", detes)
						if (item.seckill_start_time_show <= detes && item.seckill_end_time_show >= detes) {
							this.end = false
						} else {
							this.end = true
						}

						if (item.seckill_start_time_show > detes) {
							this.start = false
						} else {
							this.start = true
						}
					}
					this.flashKillingList(item.id)
				})
			})
		},
		// 秒杀列表
		flashKillingList(seckill_id) {
			let obj = {
				seckill_id: seckill_id,
				page_size: 1000

			}
			$api.postFlashKilling(obj).then(res => {
				if (res.data.code == 0) {
					this.shopList = res.data.data
				}
			})
		},
		checked(j) {
			return j < 10 ? '0' + j : j
		},
		// 拼团商品列表
		GroupProductList() {
			let obj = {
				site_id: 0,
				page_size: 1000
			}
			$api.postGroupProductList(obj).then(res => {
				if (res.data.code == 0) {
					this.shopList = res.data.data
				}
			})
		},
		// 马上拼
		goDetail(item) {
			if (this.source == 1 && !this.start) {
				uni.showToast({
					title: '抢购还未开始',
					icon: 'none',
					duration: 2000
				})
				return;
			}
			console.log(item);
			uni.navigateTo({
				url: '/pages/Productdetails/Productdetails?source=' + this.source + '&item=' + JSON.stringify(item)
			})
		},
		// tabs通知swiper切换
		tabsChange(index, id) {
			this.current = index;
			this.swiperCurrent = index;
			this.flashKillTimePeriod();
			this.flashKillingList(id) // 秒杀列表
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			// this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
			let current = e.detail.current;
			// this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		// scroll-view到底部加载更多
		onreachBottom() {

		}
	}
}
</script>

<style lang="less">
::v-deep .u-countdown-item {
	background: linear-gradient(180deg, #F14500, #F69360);
}

.tab-bar {
	width: 750rpx;
	height: 110rpx;
	background: linear-gradient(90deg, #F14500 0%, #F48B57 100%);

	.tab-list {
		display: flex;
		height: 100%;

		.tab-item-wrapper {
			display: flex;
			flex-shrink: 0;
			justify-content: center;
			align-items: flex-end;
			height: 100%;
			width: 177rpx;

			&:last-of-type {
				width: 198rpx;
				padding-right: 21rpx;
			}

			&:first-of-type {
				width: 198rpx;
				padding-left: 21rpx;
			}

			.tab-item {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 147rpx;
				height: 98rpx;
				color: #ffffff;

				&.item-active {
					background: #F9F9F9;
					border-radius: 15rpx 15rpx 0px 0px;
					color: #F14500;
				}
			}
		}

	}

}

/* .uni-swiper{
		height: 800rpx;
	} */
.timeEnd {
	display: flex;
	align-items: center;
	margin-left: 25rpx;
	height: 101rpx;
	// line-height: 101rpx;
}

.timeContent {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #2B2B2B;
}

.prompt {
	font-size: 18rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #BEBEBE;
}

.time {
	margin-left: 12rpx;
	display: inline-flex;
	border-radius: 3rpx;
	font-size: 18rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}

.teamAndKilling {
	width: 100vw;
	height: 100vh;
	background-color: #FBFBFB;
	border-radius: 10rpx;
	overflow: hidden;
	overflow-y: scroll;
}

.header {
	width: 100%;
	position: fixed;
	top: 10rpx;
	left: 0;
	height: 150rpx;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 0 0;
	z-index: 9999;
}

.shop_top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.shop_bottom {
	margin-top: 22rpx;
	margin-left: 220rpx;
	height: 1rpx;
	background: #F6F6F6;
}

.shopList {
	display: flex;
	flex-direction: column;
	background: #fff;
	// min-height: 210rpx;
	background: #FFFFFF;
	border-radius: 8rpx;
}

.shopText {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	margin-left: 24rpx;

}

.shopName {
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}

.shopNum,
.shopMoney {
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #747474;
}

.shopManjian {
	margin-left: 15rpx;
	padding: 0 5rpx;
	min-width: 68px;
	height: auto;
	border: 1px solid #E54100;
	border-radius: 4rpx;
	font-size: 9px;
	text-align: center;
	font-family: PingFang SC;
	font-weight: 400;
	color: #E31212;
}

.school {
	width: 126rpx;
	height: 51rpx;
	line-height: 51rpx;
	text-align: center;
	background: #F14500;
	border-radius: 25rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
}

img {
	width: 163rpx;
	height: 163rpx;
	border-radius: 10rpx;
}

image {
	width: 163rpx;
	height: 163rpx;
	border-radius: 10rpx;
}

.long {
	margin-top: 50rpx;
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #989898;
}

.topRight {
	display: flex;
	flex-direction: column;
	margin-right: 25rpx;
}

.topLeft {
	display: flex;
	justify-content: end;
	margin-left: 19rpx;
}

.pri_o {
	margin-top: 10rpx;
	font-size: 21rpx;
	color: #E54100;
}

.pri_s {
	font-size: 36rpx;
	font-weight: 400;
	color: #E54100;
}

.pri_t {
	margin-left: 30rpx;
	font-size: 24rpx;
	text-decoration: line-through;
	color: #808080;
}
</style>